//created by: Lim Yi Le
Ext.define('MajorProjectSenchaTouch.view.ContactUsModule.RecommendTitle', {
   extend: 'Ext.form.Panel',
   xtype: 'recommendtitleoverlay',
   id: 'recommendTitleTopPanel',
   
   config:{
       styleHtmlContent: true,
       style: 'background-color: #FFFFFF',
       modal: true,
       hideOnMaskTap: true,
       showAnimation: {
           type: 'popIn',
           duration: 250,
           easing: 'ease-out'
       },
       hideAnimation: {
           type: 'popOut',
           duration: 250,
           easing: 'ease-out'
       },
       centered: true,
       scrollable: true,
       width: '100%',
       height: '100%',
       items: [
           {
               docked: 'top',
               xtype: 'toolbar',
               title: 'Recommend a Title!',
               layout:{
                    pack: 'right'
               },
               items:[
               {
                    xtype: 'button', 
                    id: 'rtCloseBtn',
                    ui: 'plain',
                    iconCls:'delete_black2',
                    iconMask: true,
                    pressedCls: null
               }
               ]
           },
           {
               xtype: 'panel',
               layout: 'hbox',
               items: [
                   {
                       xtype: 'panel',
                       layout: 'vbox',
                       flex: 1,
                       items: [
                           {
                               flex: 1,
                               html: ['<div class="recommendTitleh2">* Name:</div>']
                           },
                           {
                               flex: 1,
                               html: ['<div class="recommendTitleh2">* Email:</div>']
                           },
                           {
                               flex: 1,
                               html: ['<div class="recommendTitleh2">* Department / School:</div>']
                           }
                       ]
                   },
                   {
                       xtype: 'panel',
                       layout: 'vbox',
                       flex: 2,
                       items: [
                           {
                                xtype: 'textfield',
                                name: 'name',
                                id: 'name',
                                placeHolder: 'Your Name',
                                flex: 1,
                                autoCapitalize: true,
                                required: true,
                                clearIcon: true
                           },
                           {
                                xtype: 'emailfield',
                                name: 'email',
                                id: 'email',
                                placeHolder: 'me@emailprovider.com',
                                flex: 1,
                                required: true,
                                clearIcon: true
                           },
                           {
                                xtype: 'selectfield',
                                name: 'departmentorschool',
                                id: 'departmentOrSchool',
                                flex: 1,
                                required: true,
                                clearIcon: true,
                                options: [
                                    {
                                        text: 'Applied Science',
                                        value: 'Applied Science'
                                    },
                                    {
                                        text: 'Business',
                                        value: 'Business'
                                    },
                                    {
                                        text: 'Design',
                                        value: 'Design'
                                    },
                                    {
                                        text: 'Engineering',
                                        value: 'Engineering'
                                    },
                                    {
                                        text: 'Humanities & Social Sciences',
                                        value: 'Humanities %26 Social Sciences'
                                    },
                                    {
                                        text: 'Informatics & IT',
                                        value: 'Informatics %26 IT'
                                    },
                                    {
                                        text: 'Computer & Information Systems',
                                        value: 'Computer %26 Information Systems'
                                    },
                                    {
                                        text: 'Finance & Administration',
                                        value: 'Finance %26 Administration'
                                    },
                                    {
                                        text: 'Human Resources & Staff Development',
                                        value: 'Human Resources %26 Staff Development'
                                    },
                                    {
                                        text: 'International Relations & Industry Services',
                                        value: 'International Relations %26 Industry Services'
                                    },
                                    {
                                        text: 'Learning Academy',
                                        value: 'Learning Academy'
                                    },
                                    {
                                        text: 'Library',
                                        value: 'Library'
                                    },
                                    {
                                        text: 'Strategic & Quality Development',
                                        value: 'Strategic %27 Quality Development'
                                    },
                                    {
                                        text: 'Others',
                                        value: 'Others'
                                    }
                                ]               
                           }
                       ]
                   }             
               ]
           },
           {
               xtype: 'spacer',
               height: 15
           },
           {
               xtype: 'panel',
               id: 'dottedBorderPanel',
               items: [
               {
                   xtype: 'spacer',
                   height: 10
               },
               {
                   html: [ '<div class="recommendTitleh1">* I recommend this Title:</div>']
               },
               {
                   xtype: 'textfield',
                   name: 'recommendedtitle',
                   id: 'recommendedTitle',
                   placeHolder: 'Recommended Title',
                   required: true,
                   clearIcon: true
               }
               ]
           },
           {
               xtype: 'panel',
               layout: 'hbox',
               items: [
                   {
                       xtype: 'panel',
                       layout: 'vbox',
                       flex: 2,
                       items: [
                           {
                                html: [ '<div class="recommendTitleh1">Other info on Title:</div>']
                           },
                           {
                                xtype: 'textfield',
                                name: 'otherinfoontitle',
                                id: 'otherInfoOnTitle',
                                height: '8em',
                                clearIcon: true
                           },
                       ]
                   },
                   {
                       xtype: 'panel',
                       layout: 'vbox',
                       flex: 1,
                       items: [
                           {
                                html: [ '<div class="recommendTitleh1">* Title is a:</div>']
                           },
                           {
                                xtype: 'selectfield',
                                name: 'titletype',
                                id: 'titleType',
                                clearIcon: true,
                                options: [
                                    {
                                        text: 'Book',
                                        value: 'Book'
                                    },
                                    {
                                        text: 'Magazine',
                                        value: 'Magazine'
                                    },
                                    {
                                        text: 'CD Rom',
                                        value: 'CD Rom'
                                    },
                                    {
                                        text: 'DVD',
                                        value: 'DVD'
                                    },
                                    {
                                        text: 'Audio CD',
                                        value: 'Audio CD'
                                    },
                                    {
                                        text: 'eResources',
                                        value: 'eResources'
                                    }
                                ]
                           },
                           {
                               xtype: 'button',
                               id: 'submitButton',
                               pressedCls:'searchBtnClicked',
                               text: 'Submit!',
                               height: '5.6em',
                               action: 'submitToEmail'
                                
                           }
                       ]
                   }             
               ]
           }
       ]
   }
   
});